<style type="text/css">
    .header{padding:10px 0 10px 15px;}
    .content{padding-left: 10px;}
    .content ul:after{clear: both;float:none;content: '';height:0;}
    .content ul li{float:left;padding-right: 10px;position:relative;height:135px;width:100px;}
    .content ul li p{padding:5px 0;text-align: center;text-overflow: ellipsis;height:19px;line-height: 20px;width:100px;overflow: hidden;}
    .content ul li input{position: absolute;right:10px;bottom:35px;}
</style>
<div class="goodslist">
    <div class="header clearfix">
        <input type="hidden" name="model" id="model" value="{$model}">
        选择城市 :
        <select class="J_city_select mr10" data-pid="0" data-uri="{:url('City/ajaxGetchilds')}" data-selected=""></select>
        <input type="hidden" name="city" id="J_select_city" value="" />
        &nbsp;&nbsp;关键词 :<input type="text" name="keyword" id="keyword" class="input-text" size="15" />
        <input type="button" class="btn btn_submit" name="dosubmit" id="dosubmit" onclick="getData(1);" value="搜&nbsp;&nbsp;索">
    </div>
    <div class="content">
        <ul id="lists" class="clearfix" data-uri="{:url('ajaxGetList')}" data-totalpage="{$totalPage}">

        </ul>
        <div id="pages"></div>
    </div>
</div>
<script type="text/html" id="templates">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}
    <li>
        <img src="{{d[i]['img']}}" width="100" height="100" />
        <p data-title="{{d[i]['title']}}">{{d[i]['title']}}</p>
        <input type="{$type}" value="{{d[i]['id']}}" data-price="{{d[i]['average_price']}}" data-img="{{d[i]['img']}}" data-title="{{d[i]['title']}}" class="ckbox" name="aid" />
    </li>
    {{# } }}
</script>
<script src="__PUBLIC__/js/layer/laytpl.js"></script>
<script src="__PUBLIC__/js/layer/laypage.js"></script>
<script type="text/javascript">
    $('.J_city_select').cate_select({field:'J_select_city',level:1});
    //运行
    getData(1);
    function getData(curr){
        $.yingloujie.tip({content:'数据加载中...',icon:'alert',time:10000});
        $.getJSON(document.getElementById('lists').getAttribute('data-uri'), {
            page: curr || 1, //向服务端传的参数
            keyword : $("#keyword").val(),
            model   : $("#model").val(),
            city    : $(".J_city_select").val()
        }, function(res){
            if(res.status == 1){
                var gettpl = document.getElementById('templates').innerHTML;
                laytpl(gettpl).render(res.data, function(html){
                    document.getElementById('lists').innerHTML = html;
                });
            }else{
                document.getElementById('lists').innerHTML = '<li>'+res.msg+'</li>';
            }
            $.yingloujie.tip({close:true});
            //显示分页
            laypage({
                cont: 'pages', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                pages: document.getElementById('lists').getAttribute('data-totalpage'), //通过后台拿到的总页数
                curr: curr || 1, //当前页
                jump: function(obj, first){ //触发分页后的回调
                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                        getData(obj.curr);
                    }
                }
            });
        });
    }
</script>